<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>谷歌离线地图加载 - xyz</title>
    <script src='../lib/ol6.12.0/ol.js'></script>
    <script src='../lib/tool/index.js'></script>
    <link rel='stylesheet' href='../css/ol6.4.3/ol.css'>
    <link rel='stylesheet' href='../css/main.css'>
</head>
<body>
<div id='map'></div>
<script>
    const centerPoint = [120.151966, 30.244797];

    // 创建地图
    const map = new ol.Map({
        view: new ol.View({
            center: centerPoint,
            zoom: 15,
            projection: 'EPSG:4326'
        }),
        target: 'map'
    });

    const googleSatelliteLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: `http://192.168.107.154:10001/scgis/satelite?level={z}&col={x}&row={y}`,
            wrapX: false
        })
    });

    const circleFeature = new ol.Feature({
        geometry: new ol.geom.Circle(centerPoint, getRadius(map, 5000))
    });
    circleFeature.setStyle(new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(0,255,255,1)',
            width: 5
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.2)'
        })
    }));

    const vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [circleFeature]
        })
    });

    map.addLayer(googleSatelliteLayer);
    map.addLayer(vectorLayer);

</script>
</body>
</html>